<div class="row">
    <div class="col-xs-2">
        <button type="button" class="btn btn-primary btn-block" onclick="modal('{:url(\'add\')}','添加新分类','60%','80%')">添加新分类</button>
    </div>
    <div class="col-xs-2">
        <button type="button" class="btn btn-primary btn-block" onclick="modal('{:url(\'recycle\')}', '回收站','60%','80%')">回收站</button>
    </div>

</div>
<hr>

{volist name="list1" id="item1"}
<div class="accordion" id="category_{$item1.id}" role="tablist" aria-multiselectable="true">
    <div class="panel" style="background: none; border: none; -webkit-box-shadow: none; box-shadow: none;">
        <div class="panel-heading" style="background: none; border: 1px solid #ebebeb;">
            {if $level>=2}
            <i class="fa fa-minus" role="tab" id="category_header_{$item1.id}" data-toggle="collapse"
               data-parent="#category_{$item1.id}" href="#category_collapse_{$item1.id}"
               aria-expanded="true" aria-controls="category_collapse_{$item1.id}"
               onclick="collapseCategory('category_header_{$item1.id}')"></i>
            {/if}
            <span class="panel-title">
                【ID：{$item1.id}】{$item1.title}
                <a href="javascript:void(0);" style="padding-left: 10px;" onclick="ejectImg('{$item1.img_url|default_img}','分类图标');">
                    <img style="width:30px;height: 30px;" src="{$item1.img_url|default_img}">
                </a>
            </span>
            <div style="float: right; margin-top: -4px;">
                {if $item1["is_visible"]}
                <label class="label label-success" data-toggle="ajaxSwitch" data-switch-status="1"
                       data-switch-value-0="1|显示|label label-success|{:url('Category/visible',array('cid'=>$item1['id'],'status'=>1))}"
                       data-switch-value-1="0|隐藏|label label-danger|{:url('Category/visible',array('cid'=>$item1['id'],'status'=>0))}">显示</label>
                {else}
                <label class="label label-danger" data-toggle="ajaxSwitch" data-switch-status="0"
                       data-switch-value-0="1|显示|label label-success|{:url('Category/visible',array('cid'=>$item1['id'],'status'=>1))}"
                       data-switch-value-1="0|隐藏|label label-danger|{:url('Category/visible',array('cid'=>$item1['id'],'status'=>0))}">隐藏</label>
                {/if}

                {if $level>=2}
                <button type="button" class="btn btn-default btn-sm" onclick="modal('{:url(\'add\',array(\'parent_id\'=>$item1[\'id\']))}','添加下级分类','60%','80%')">
                    <i class="fa fa-plus"></i>
                </button>
                {/if}
                <button type="button" class="btn btn-default btn-sm" onclick="modal('{:url(\'edit\',array(\'cid\'=>$item1[\'id\']))}','编辑分类','60%','80%')">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" class="btn btn-default btn-sm" data-toggle="confirm" data-title="删除分类"
                        data-content="确定要删除 分类【{$item1.title}】吗？" data-url="{:url('remove',array('cid'=>$item1['id']))}">
                    <i class="fa fa-times"></i>
                </button>
            </div>
        </div>
        <div id="category_collapse_{$item1.id}" class="panel-collapse collapse in" role="tabpanel"
             aria-labelledby="category_header_{$item1.id}">
            <div class="panel-body" style="padding-right: 0;">
                {if condition="$level>=2&&!empty($item1.children)"}
                {volist name="$item1.children" id="item2"}
                <div class="accordion" id="category_{$item2.id}" role="tablist" aria-multiselectable="true">
                    <div class="panel" style="background: none; border: none; -webkit-box-shadow: none; box-shadow: none;">
                        <div class="panel-heading" style="background: none; border: 1px solid #ebebeb;">
                            {if $level>=3}
                            <i class="fa fa-minus" role="tab" id="category_header_{$item2.id}" data-toggle="collapse"
                               data-parent="#category_{$item2.id}" href="#category_collapse_{$item2.id}"
                               aria-expanded="true" aria-controls="category_collapse_{$item2.id}"
                               onclick="collapseCategory('category_header_{$item2.id}')"></i>
                            {/if}
                            <span class="panel-title">
                                【ID：{$item2.id}】{$item2.title}
                                <a href="javascript:void(0);" style="padding-left: 10px;" onclick="ejectImg('{$item2.img_url|default_img}','分类图标');">
                                    <img style="width:30px;height: 30px;" src="{$item2.img_url|default_img}">
                                </a>
                            </span>
                            <div style="float: right; margin-top: -4px;">
                                {if $item2["is_visible"]}
                                <label class="label label-success" data-toggle="ajaxSwitch" data-switch-status="1"
                                       data-switch-value-0="1|显示|label label-success|{:url('Category/visible',array('cid'=>$item2['id'],'status'=>1))}"
                                       data-switch-value-1="0|隐藏|label label-danger|{:url('Category/visible',array('cid'=>$item2['id'],'status'=>0))}">显示</label>
                                {else}
                                <label class="label label-danger" data-toggle="ajaxSwitch" data-switch-status="0"
                                       data-switch-value-0="1|显示|label label-success|{:url('Category/visible',array('cid'=>$item2['id'],'status'=>1))}"
                                       data-switch-value-1="0|隐藏|label label-danger|{:url('Category/visible',array('cid'=>$item2['id'],'status'=>0))}">隐藏</label>
                                {/if}
                                {if $level>=3}
                                <button type="button" class="btn btn-default btn-sm" onclick="modal('{:url(\'add\',array(\'parent_id\'=>$item2[\'id\']))}','添加下级分类','60%','80%')">
                                    <i class="fa fa-plus"></i>
                                </button>
                                {/if}
                                <button type="button" class="btn btn-default btn-sm" onclick="modal('{:url(\'edit\',array(\'cid\'=>$item2[\'id\']))}','编辑分类','60%','80%')">
                                    <i class="fa fa-edit"></i>
                                </button>
                                <button type="button" class="btn btn-default btn-sm" data-toggle="confirm" data-title="删除分类"
                                        data-content="确定要删除 分类【{$item2.title}】吗？" data-url="{:url('remove',array('cid'=>$item2['id']))}">
                                    <i class="fa fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <div id="category_collapse_{$item2.id}" class="panel-collapse collapse in" role="tabpanel"
                             aria-labelledby="category_header_{$item2.id}">
                            <div class="panel-body">
                                {if condition="$level>=3&&!empty($item2.children)"}
                                {volist name="$item2.children" id="item3"}
                                <div class="accordion" id="category_{$item3.id}" role="tablist" aria-multiselectable="true">
                                    <div class="panel" style="background: none; border: none; -webkit-box-shadow: none; box-shadow: none;">
                                        <div class="panel-heading" style="background: none; border: 1px solid #ebebeb;">
                                            <span class="panel-title">
                                                【ID：{$item3.id}】{$item3.title}
                                                <a href="javascript:void(0);" style="padding-left: 10px;" onclick="ejectImg('{$item3.img_url|default_img}','分类图标');">
                                                    <img style="width:30px;height: 30px;" src="{$item3.img_url|default_img}">
                                                </a>
                                            </span>
                                            <div style="float: right; margin-top: -4px;">
                                                {if $item3["is_visible"]}
                                                <label class="label label-success" data-toggle="ajaxSwitch" data-switch-status="1"
                                                data-switch-value-0="1|显示|label label-success|{:url('Category/visible',array('cid'=>$item3['id'],'status'=>1))}"
                                                data-switch-value-1="0|隐藏|label label-danger|{:url('Category/visible',array('cid'=>$item3['id'],'status'=>0))}">显示</label>
                                                {else}
                                                <label class="label label-danger" data-toggle="ajaxSwitch" data-switch-status="0"
                                                data-switch-value-0="1|显示|label label-success|{:url('Category/visible',array('cid'=>$item3['id'],'status'=>1))}"
                                                data-switch-value-1="0|隐藏|label label-danger|{:url('Category/visible',array('cid'=>$item3['id'],'status'=>0))}">隐藏</label>
                                                {/if}
                                                <button type="button" class="btn btn-default btn-sm" onclick="modal('{:url(\'edit\',array(\'cid\'=>$item3[\'id\']))}')">
                                                    <i class="fa fa-edit"></i>
                                                </button>
                                                <button type="button" class="btn btn-default btn-sm" data-toggle="confirm" data-title="删除分类"
                                                        data-content="确定要删除 分类【{$item3.title}】吗？" data-url="{:url('remove',array('cid'=>$item3['id']))}">
                                                    <i class="fa fa-times"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {/volist}
                                {/if}
                            </div>
                        </div>
                    </div>
                </div>
                {/volist}
                {/if}
            </div>
        </div>
    </div>
</div>
{/volist}

<script>
    function collapseCategory(objectId)
    {
        var object = $("#"+objectId);
        //减号变加号
        if (object.hasClass("fa-minus"))
        {
            object.removeClass("fa-minus");
            object.addClass("fa-plus");
        }
        //加号变减号
        else if (object.hasClass("fa-plus"))
        {
            object.removeClass("fa-plus");
            object.addClass("fa-minus");
        }
    }
</script>